<template>
  <div>
    <!-- <h5 class="titleInfo"></h5> -->
    <el-form label-width="130px" ref="params" :rules="rules" :model="params">
      <el-row>
        <el-col :span="24">
          <el-form-item label="券名称" prop="name">
            <el-input
              placeholder="请输入卡名称"
              maxlength="10"
              v-model="params.name"
              :disabled="this.$route.query.type=='edit'"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="券描述" prop="describe">
            <el-input
              placeholder="请输入卡描述"
              maxlength="20"
              v-model="params.describe"
              :disabled="this.$route.query.type=='edit'"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="券场景" prop="ticket_scene">
            <el-radio-group
              v-model="params.ticket_scene"
              :disabled="this.$route.query.type=='edit'"
            >
              <el-radio :label="1">项目券</el-radio>
              <el-radio :label="2">服务商加盟券</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <div v-if="params.ticket_scene">
          <el-col :span="24" v-if="params.ticket_scene==1">
            <el-form-item label="券类型" prop="ticket_type">
              <el-radio-group
                v-model="params.ticket_type"
                :disabled="this.$route.query.type=='edit'"
              >
                <el-radio :label="2">体验券</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-else>
            <el-form-item label="券类型" prop="ticket_type">
              <el-radio-group
                v-model="params.ticket_type"
                :disabled="this.$route.query.type=='edit'"
              >
                <el-radio :label="1">抵扣券</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </div>
        <el-col :span="24" v-if="params.ticket_scene==2">
          <el-form-item label="抵扣金额" prop="money">
            <el-input v-model="params.type_money" @keyup.native="proving($event)"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="券样式" prop="style">
            <div class="flex_Box">
              <el-card
                :body-style="{ padding: '0px' }"
                v-for="(item, index) in photoListurl"
                :key="index"
                :offset="index > 0 ? index+1 : 0"
                class="card_Box"
              >
                <img :src="item.style_pic|imgUrlFn" class="image" />

                <div style="padding: 14px;">
                  <el-radio
                    v-model="params.style_id"
                    :label="item.id"
                  >样式{{index+1|withdrawStatusFilter}}</el-radio>
                </div>
              </el-card>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="券售价" prop="sale_price">
            <el-input
              placeholder="请输入券售价"
              v-model="params.sale_price"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="定金支付" prop="is_user_deposit">
            <div>
              <el-radio-group v-model="params.is_user_deposit">
                <el-radio :label="0">不支持</el-radio>
                <el-radio :label="1">支持</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="params.is_user_deposit==1">
          <el-form-item label="定金支付金额" prop="deposit_money">
            <el-input v-model="params.deposit_money"></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="抵扣方式">
            <el-select v-model="params.deduction_type" placeholder="请选择">
              <el-option
                v-for="item in DeductionOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="params.deduction_type==1">
          <el-form-item label="金币优惠">
            <el-input
              placeholder="请输入"
              v-model="params.deduction_number"
              type="number"
              @keyup.native="proving($event)"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="params.deduction_type==2">
          <el-form-item label="银币优惠">
            <el-input
              placeholder="请输入"
              v-model="params.deduction_number"
              type="number"
              @keyup.native="proving($event)"
            ></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="6">
          <el-form-item label="抵扣">
            <el-input placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>-->
        <el-col :span="13">
          <el-form-item label="购买须知" prop="notice">
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="params.notice"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上架状态" prop="hospitalEnvStar">
            <div>默认下架，在列表进行上架</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="购买日期" prop="buy_time" width="236">
            <el-date-picker
              type="daterange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              v-model="buy_time"
              :default-time="['00:00:00', '23:59:59']"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="有效期" prop="expire_time" width="236">
            <el-date-picker
              type="daterange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              v-model="expire_time"
              :default-time="['00:00:00', '23:59:59']"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <!-- 是否支持退款 0不支持 1支持 -->
        <el-col :span="12">
          <el-form-item label="是否支持退款" prop="is_refund">
            <div>
              <el-radio-group v-model="params.is_refund">
                <el-radio :label="1">支持</el-radio>
                <el-radio :label="0">不支持</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
        </el-col>
        <!-- 提交按钮 -->
        <el-col :span="13">
          <div class="allCenter">
            <el-button type="primary" class="submitBtn" @click="submitFn('params')">下一步</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { photoList, create, detail, update } from "@/api/ticketMange";
//src\utils\common.js
import commonFn from "@/utils/common";
import filter from "@/assets/filter";
export default {
  props: {
    tab: {
      type: Number,
      default: () => {
        return null;
      }
    }
  },
  watch: {
    "params.ticket_scene": {
      deep: true,
      handler: function(val, oldV) {
        // console.log(val);
        // if (val) {
        this.$emit("radioStyle", val);
        // }
      }
    },
    buy_time(val) {
      this.params.buy_time = this.buy_time
        ? this.buy_time[0] + " - " + this.buy_time[1]
        : "";
    },
    expire_time(val) {
      this.params.expire_time = this.expire_time
        ? this.expire_time[0] + " - " + this.expire_time[1]
        : "";
    }
  },
  data() {
    const priceReg = (rule, value, callback) => {
            let reg = /^[1-9]\d*$/;
            if (!value) {
                return callback(new Error("请输入"));
            } else if (!reg.test(value)) {
                return callback(new Error("请输入正确的数值"));
            }
    };
    return {
      buy_time: "",
      expire_time: "",
      radioStyle: null,
      //不抵扣/金币抵扣/银币抵扣
      DeductionOptions: [
        { value: 0, label: "不抵扣" },
        { value: 1, label: "金币抵扣" },
        { value: 2, label: "银币抵扣" }
      ],

      rules: {
        name: [
          {
            required: true,
            message: "请输入券名称",
            trigger: "blur"
          }
        ],
        describe: [
          {
            required: true,
            message: "请输入券描述",
            trigger: "blur"
          }
        ],
        ticket_scene: [
          {
            required: true,
            message: "请选择",
            trigger: "change"
          }
        ],
        ticket_type: [
          {
            required: true,
            message: "请选择券类型",
            trigger: "blur"
          }
        ],
        style_id: [
          {
            required: true,
            message: "请选择卡样式",
            trigger: "change"
          }
        ],
        deposit_money: [
          {
            required: true,
            message: "请输入",
            trigger: "blur"
          }
        ],
        notice: [
          {
            required: true,
            message: "请输入购买须知",
            trigger: "blur"
          }
        ],
        // sale_price: [
        //   {
        //     required: true,
        //     validator: priceReg,
        //     trigger: "blur"
        //   }
        // ]
      },
      photoList: [],
      photoListurl: null,
      value1: 0,
      radio: 0,
      params: {
        type: 2,
        page: 1,
        pagesize: 10,
        style_type: 2,
        is_user_deposit: 0,
        sale_price: "",
        deduction_number: "",
        type_money: 0
      }
    };
  },
  //过滤
  filters: {
    // 时间戳转化
    dateFn(e) {
      if (e != 0) {
        return new Date(Number(e) * 1000).format("yyyy-MM-dd hh:mm:ss");
      } else {
        return "--";
      }
    },
    withdrawStatusFilter(e) {
      switch (String(e)) {
        case "1":
          return "一";
          break;
        case "2":
          return "二";
          break;
        case "3":
          return "三";
          break;
        case "4":
          return "四";
          break;
        case "5":
          return "五";
          break;
        case "6":
          return "六";
          break;
        case "7":
          return "七";
          break;
        case "8":
          return "八";
          break;
        case "9":
          return "九";
          break;
        case "10":
          return "十";
          break;
      }
    },
    imgUrlFn(e) {
      return localStorage.getItem("imgUrlPrefix") + e;
    }
  },
  // watch: {
  //   radio(val) {
  //     this.$emit("radioStyle", val);
  //   }
  // },
  mounted() {
    this.getphotoList();
    this.activeId = this.$route.query.id;
    if (this.$route.query.id) {
      this.detailfn();
    }
  },
  methods: {
    // 最小金额输入限制
    proving(e) {
      var keynum = window.event ? e.keyCode : e.which; // 获取键盘码
      var keychar = String.fromCharCode(keynum); // 获取键盘码对应的字符
      if (keynum == 189 || keynum == 190 || keynum == 109) {
        this.$message.warning("禁止输入小数以及负数");
        e.target.value = " ";
      }
    },
    //详情
    async detailfn() {
      let res = await detail({ id: this.activeId });
      console.log(res);
      if (res.data.code == 200) {
        this.buy_time = [
          // ((res.data.data.put_start_time - 0) * 1000) | date(1),
          // ((res.data.data.put_end_time - 0) * 1000) | date(1)

          commonFn.formatDate(res.data.data.put_start_time),
          commonFn.formatDate(res.data.data.put_end_time)
        ];

        this.expire_time = [
          commonFn.formatDate(res.data.data.validity_start_time),
          commonFn.formatDate(res.data.data.validity_end_time)
        ];

        console.log(commonFn.formatDate(res.data.data.put_end_time));
        this.params = res.data.data;
      }
    },
    //样式图片列表
    getphotoList() {
      photoList(this.params).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          // this.photoList = res.data.data.length ? res.data.data : [];
          // // this.photoList=res.data.data.data
          // let arrList = [];
          // if (this.photoList.length) {
          //   this.photoList.forEach(item => {
          //     console.log(item.style_pic);
          //     arrList.push(item.style_pic);
          //   });
          // }
          // this.photoListurl = localStorage.getItem("imgUrlPrefix") + arrList[0];
          this.photoListurl = res.data.data.slice(0, 10);
        }
      });
    },
    submitFn(formName) {
      if ((this.params.sale_price-0) < (this.params.deposit_money-0)) {
            this.$message.error("定金支付金额不能大于售价，请重新输入");
            return;
          }
      this.$refs[formName].validate(async valid => {
        if (valid) {
          let res = {};
          if (this.$route.query.id) {
            update(this.params).then(res => {
              this.commfn(res);
            });
          } else {
            // console.log(this.params)
            await create(this.params).then(res => {
              if (res.data.code == 200) {
                this.commfn(res);
              } else {
                this.$message.warning(res.data.msg);
              }
            });
          }
        } else {
          this.$message.warning("有必填项没填，不能提交咯!!");
          return false;
        }
      });
    },
    commfn(res) {
      if (res.data.code == 200) {
        console.log(res.data.data.id);
        this.activeId = res.data.data.id;
        this.$emit("push", this.tab, this.activeId, this.params.ticket_scene);
      }
    }
  }
};
</script>
<style scoped>
.flex_Box {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.card_Box {
  width: 18%;
  margin: 0 15px 15px 0;
}
.card_Box img.image {
  width: 100%;
  height: 310px;
}
.allCenter {
  text-align: center;
  margin-bottom: 15px;
}
</style>